import { GithubOutlined, HolderOutlined, HomeOutlined, ScheduleOutlined, ShopOutlined, ThunderboltOutlined, TrophyOutlined, WhatsAppOutlined } from '@ant-design/icons'
import { Layout, Menu } from 'antd'
import { observer } from 'mobx-react-lite'
import { useEffect, useState } from 'react'
import { Outlet, useNavigate } from 'react-router-dom'
import { useStore } from '../../store'
import Header from '../head/Head'
import './Index.scss'

function Com(props) {
  const [state, setState] = useState(0)
  const { Sider, Content } = Layout
  const navigate = useNavigate()
  const { collapseStore } = useStore()

  useEffect(() => {
    console.log('函数组件来咯')
  }, [])
  let items = [
    // {
    //   icon: <TwitterOutlined />,
    //   style: { margin: 'auto', fontSize: '28px' }
    // },
    {
      key: 0,
      icon: <HomeOutlined />,
      label: '首页',
      path: '/'
    },
    {
      key: 1,
      icon: <HolderOutlined />,
      label: '通用',
      path: '/public',
      children: [
        {
          key: '1-1',
          icon: <ScheduleOutlined />,
          label: '按钮',
          path: '/public/button'
        },
        {
          key: '1-2',
          icon: <ShopOutlined />,
          label: '图标',
          path: '/public/icon'
        },
        {
          key: '1-3',
          icon: <ThunderboltOutlined />,
          label: '其他',
          path: '/public/others',
          children: [
            {
              key: '1-3-1',
              icon: <WhatsAppOutlined />,
              label: '表格',
              path: '/public/others/table'
            },
            {
              key: '1-3-2',
              icon: <TrophyOutlined />,
              label: '富文本',
              path: '/public/others/richtext'
            }
          ]
        }
      ]
    },
    {
      key: 2,
      icon: <WhatsAppOutlined />,
      label: '关于',
      path: '/about'
    }
  ]

  return (
    <div className="index">
      <Layout style={{ height: '100vh' }}>
        <Sider collapsible collapsed={collapseStore.collapse} trigger={null} style={{ width: 200 }}>
          <div className="logo">
            <GithubOutlined />
          </div>
          <Menu
            items={items}
            mode="inline"
            theme="dark"
            onSelect={e => {
              navigate(e.item.props.path)
            }}
          />
        </Sider>
        <Layout style={{ padding: '0 20px' }}>
          <Header />
          <Content style={{ backgroundColor: '#f5f5f5' }}>
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </div>
  )
}

export default observer(Com)
